<template>
	<view class="container">
		<u-collapse @change="change" @close="close" @open="open"  accordion>
			<u-collapse-item name="1">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#aa0000" size="28"></u-icon>
					<text>一级警报</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in I">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx"  @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card>
			</u-collapse-item>
			<u-collapse-item  name="">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#fc4c01" size="28"></u-icon>
					<text>二级警报</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in II">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx" @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card> 
			</u-collapse-item>
			<u-collapse-item  name="">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#ffc702" size="28"></u-icon>
					<text>三级警报</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in III">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx" @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card>
			</u-collapse-item>
			<u-collapse-item  name="">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#08a0ff" size="28"></u-icon>
					<text>四级警报</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in IV">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx"  @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card>
			</u-collapse-item>
			<u-collapse-item  name="">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#00ff00" size="28"></u-icon>
					<text>正常绿地</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in V">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx"  @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card>
			</u-collapse-item>
			<u-collapse-item  name="">
				<view slot="title"  class="u-page_item_title_slot-title">
					<u-icon name="bell-fill" color="#717171" size="28"></u-icon>
					<text>数值不正确绿地</text>
				</view>
				<fui-card style="background-color: #f5fff3;margin-bottom: 20rpx;" v-for="(item,index) in VI">
					<image class="fui-cover" :src="item.greenLandPhotos[0].photoUrl" mode="heightFix" @click="toDetail(item)"></image>
					<view class="fui-card__title" style="padding: 10rpx 20rpx;">
						<view class=""style="margin-bottom: 10px;display: inline-block;">
							绿地名称:{{item.name}}
						</view>	<view style="display: inline-block;margin-left: 10px;">
							创建时间:{{item.date}}
						</view>	
						<fui-button type="success" height="60rpx"  @click="setWaring(item)">
							<fui-icon name="captcha" color="#fff" size="14rpx"></fui-icon>消除警报</fui-button>
					</view>
				</fui-card>
			</u-collapse-item>
			
		</u-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				greenLandAll:[],
				I:[],
				II:[],
				III:[],
				IV:[],
				V:[],
				VI:[],
			}
		},
		mounted() {
			this.initData()
			// console.log(this.$storage.get('user')+"这里")
		},
		methods: {
			initData(){
				this.I = []
				this.II = []
				this.III = []
				this.IV = []
				this.V = []
				this.VI = []
				this.greenLandAll = this.$storage.get('greenLandAll')
				// console.log(this.greenLandAll)
				if(this.greenLandAll){
				this.greenLandAll.forEach((item,index)=>{
					if(item.waringGrade ==0){
						this.I.push(item)
					}if(item.waringGrade ==1){
						this.II.push(item)
					}if(item.waringGrade ==2){
						this.III.push(item)
					}if(item.waringGrade ==3){
						this.IV.push(item)
					}if(item.waringGrade ==4){
						this.V.push(item)
					}if(item.waringGrade ==6){
						this.VI.push(item)
					}
				})
				}
				// console.log(this.greenLandAll)
			},			
			open(e) {
				this.initData()
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			setWaring(greenLand){
				this.$utils.navigateTo("ModelPage/fileControl?id="+greenLand.interNum,'')
			},
			getGreenLandAll(){
				return new Promise((resolve,reject)=>{
					let user= JSON.parse( this.$storage.get("user"))
					this.$http.httpPost('green/findAllByRole',user).then(sucess=>{
						if(sucess.data.status==200){
							// this.greenLandAll = sucess.data.data
							let Gdata = sucess.data.data
							this.$storage.set("greenLandAll" ,Gdata)
							resolve()
						}
					})
				})
			},
			toDetail(greenLand){
				console.log(greenLand)
				this.$utils.navigateTo("ModelPage/greenDetail?greenLandId="+greenLand.id,'')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "riskResponse.scss";
</style>
